<template>
  <view class="bottom-bar-padding">
    <u-status-bar></u-status-bar>
    <navigator
    class="navigator-back"
    open-type="navigateBack"
    >
    <u-icon name="arrow-left" color="#fff" size="28rpx"></u-icon>
    </navigator>
    <!-- 轮播图结构 -->
    <swiper
    class="goods-swiper"
        indicator-dots
        circular
    >
        <swiper-item 
        v-for="item in goodsInfo.pics"
        :key="item.pics_id"
        >
            <image
                class="goods-swiper-image"
                :src="item.pics_big_url"
                mode="aspectFill"
                @click="handlerShowImage(item.pics_big_url)"
            />
        </swiper-item>
    </swiper>

    <!-- 商品文字信息 -->
    <view class="goods-info">
        <view class="goods-info-tile">
            <view class="goods-info-price">3999</view>
            <view class="icon-group">
                <!--  分享按钮需要定位到图标上方-->
                <u-icon name="share-square"  size="50rpx"></u-icon>
                <button open-type="share">分享按钮 需要设置透明度为0</button>
            </view>
            <view>
                <u-icon name="star" size="50rpx"></u-icon>
                <button open-type=""></button>
            </view>
           
        </view>
        <view class="goods-info-name">{{ goodsInfo.goods_name }}</view>
    </view>

    <!-- 图文详情 -->
    <view class="goods-introduce">
        <view class="goods-introduce-title">图文详情</view>
        <rich-text class="goods-introduce-content" :nodes="goodsInfo.goods_introduce"></rich-text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
        <view class="icon-group">
            <u-icon name="kefu-ermai" size="30rpx" color="#333"></u-icon>
            <view>联系客服</view>
            <button open-type="contact">客服</button>
        </view>
        <view class="icon-group">
            <u-icon name="shopping-cart" size="30rpx" color="#333"></u-icon>
            <view>购物车</view>
        </view>

        <view class="btn" @click="handleAddCart">加入购物车</view>
        <view class="btn">立即购买</view>
    </view>
  </view>
</template>

<script>
import { getGoodsDetailById } from '@/api/goods'
export default{
    data(){
        return{
            goods_id:'',
            goodsInfo:{},
        }
    },
    onLoad(options) {

        console.log(options)
        this.goods_id = options.goods_id ||'47869'
        this.getGoodsDetail() 
    },
    methods:{
      async getGoodsDetail(){
            const res = await getGoodsDetailById(this.goods_id)
            this.goodsInfo = res.data.message
            // 小程序的富文本组件内部的html可以通过添加类修改样式，不能通过选择器 
            this.goodsInfo.goods_introduce = this.goodsInfo.goods_introduce.replace(/<img/g,'<img class="img"')
        },
        handlerShowImage(current){
            console.log(current)
            const urls = this.goodsInfo.pics.map(item=>item.pics_big_url)
            console.log(urls)
            uni.previewImage({
                // 当前图片
                current:current,
                // 图片地址字符串数组
                urls:urls
            })
        },
        // 添加到购物车
        handleAddCart(){
            // 获取原购物车列表数据
            const newList = [...this.$store.state.cartList]
            console.log(newList)
            // 查找是否有当前的商品
            const index = newList.findIndex(v=>Number(v.goods_id) === Number(this.goods_id))
            console.log('index------',index)
            if(index !==  -1){
                //如果能找到
                newList[index].goods_count++
            }else{
                newList.push({
                    goods_id: this.goods_id,
                    goods_small_logo: this.goodsInfo.goods_small_logo,
                    goods_name: this.goodsInfo.goods_name,
                    goods_price: this.goodsInfo.goods_price,
                    goods_count: 1,
                    goods_select:true
                })
            }
             this.$store.commit('setCartList',newList)
             uni.showToast({
                title:'加入成功',
                icon:'success',
                mask:true
             })
        }
    }
}
</script>
<style lang="scss">
.bottom-bar-padding{
    padding-bottom: 120rpx;
}
.navigator-back{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50rpx;
    height: 50rpx;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 30rpx;
    top: 50rpx;
    z-index: 99;
    border-radius: 50%;
}
.goods-swiper{
    width: 750rpx;
    height: 750rpx;
    .goods-swiper-image{
        width: 750rpx;
        height: 750rpx;
    }

}

.goods-introduce{
    .goods-introduce-title{
        font-size: 28rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .goods-introduce-content{
        .img{
            vertical-align: middle;     
        }
    }
}

.bottom-bar{
    display: flex;
    align-items: center;
    height: 94rpx;
    background-color: #fff;
    border-top: 1px solid #ddd;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    .icon-group{
        flex:1;
        font-size: 22rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        button{
            position: absolute;
            left:0;
            top: 0;
            opacity: 0;
        }
    }
    .btn{
        width: 196rpx;
        height: 60rpx;
        border-radius: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fcaa23;
        margin: 0 10rpx;
        font-size: 26rpx;
        &:last-child{
            background-color: #ea4350;
        }
        
    }
}
</style>